<template>
  <div class="couponList">
    <div class="tit">
      优惠券
      <span>クーポン</span>
    </div>
    <div class="list">
      <ul>
        <li v-for="item in list" :key="item">
          <div v-if="item==1">
            <div class="left">
              <p class="p1">贝拍单</p>
              <p class="p2">通用优惠券</p>
              <p class="p3">有效期至2018.10.14</p>
            </div>
            <div class="right">
              <sub>￥</sub>
              <span>20</span>
              <p>满399可使用</p>
            </div>
          </div>
          <div v-if="item==2"> 
            <div class="left" style="padding-left:70px;">
              <img src="../../assets/images/product.png" alt="">
              <p class="p1">贝拍单</p>
              <p class="p2">通用优惠券</p>
              <p class="p3">有效期至2018.10.14</p>
            </div>
            <div class="right">
              <sub>￥</sub>
              <span>20</span>
              <p>满399可使用</p>
            </div>
          </div>
        </li>
      </ul>
    </div>
    <div class="none" v-if="list.length==0">
      <img src="../../assets/images/icon6.png" alt="">
      <p>呦，您暂无优惠券</p>
    </div>
  </div>
</template>

<script>
export default {

  data () {
    return {
      list:[2]
    }
  },

  methods: {},

  created () {
  }
}
</script>

<style lang='less' scoped>
.list{
  ul{
    list-style: none;
    padding: 0;
    li{
      margin-top: 10px;
      >div{
        width:100%;
        height:90px;
        background: #FDDF00;
        box-shadow: 0 8px 18px 0 rgba(0,0,0,0.03);
        border-radius: 8px;
        position: relative;
        .left{
          padding-left:20px;
          padding-top:15px;
          img{
            width:38px;
            height:38px;
            position: absolute;
            left:20px;
            border-radius:5px;
          }
          p{
            color: #333333;
            font-size: 12px;
          }
          .p1{
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 0;
          }
          .p2{
            font-size: 14px;
            margin-bottom: 5px;
          }
          .p3{
            font-size: 12px;
          }
        }
        .right{
          &:before,&:after{
            position: absolute;
            content:'';
            width:16px;
            height:16px;
            border-radius:8px;
            background: #fff;
            left:-8.5px;
          }
          &:before{
            
            top:-8px;
          }
          &:after{
            bottom:-8px;
          }
          width:95px;
          position: absolute;
          top:0;
          right:0;
          height:100%;
          text-align: right;
          padding-right: 15px;
          padding-top: 17px;
          border-left:1px solid #fff;
          sub{
            font-size: 16px;
            color: #333333;
            bottom:1px;
            right:-5px;
            
          }
          span{
            font-size: 30px;
            color: #151515;
            line-height: 32px;
            margin-top: 3px;
            display: inline-block;
          }
          p{
            font-size: 12px;
            color: #333333;
          }
        }
      }
      
    }
  }
}
.none{
  text-align: center;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%,-50%);
  img{
    width:132px;
    height:132px;
    margin-bottom: 18px;
  }
  p{
    font-size: 14px;
    color: #333333;
    font-weight:700;
  }
}
</style>
